<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<meta charset="utf-8">
		<title>UC浏览器</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			img {
				vertical-align: bottom;
			}

			/* 清除无序列表的 点 */
			li {
				list-style: none;
			}

			a {
				text-decoration: none;
			}

			.bd {
				border: 1px solid red;
			}

			.w {
				width: 986px;
				/* 居中 */
				margin: 0 auto;
			}

			.fl {
				float: left;
			}

			.fr {
				float: right;
			}

			.clearfix::before,
			.clearfix::after {
				content: "";
				display: table;
			}

			.clearfix::after {
				clear: both;
			}

			header {
				position: fixed;
				background-color: #fff;
				width: 100%;
				z-index: 100;
				top: 0;
			}

			.logo {
				padding-top: 15px;
				padding-bottom: 12px;
			}

			.navigation {
				padding-right: 20px;
				padding-top: 5px;
			}

			.navigation>li {
				margin-left: 32px;
				padding: 0 10px;
			}

			.current {
				border-bottom: 3px solid orange;
			}

			.navigation a {
				display: block;
				font-size: 20px;
				line-height: 62px;
			}

			.navigation>li:hover {
				border-bottom: 3px solid green;
			}

			.navigation li {
				/* position: relative; */
			}

			.subnav {
				display: none;
				position: absolute;
			}

			.navigation>li:hover .subnav {
				display: block;
			}

			.subnav li:hover {
				background-color: yellow;
			}

			.subnav a {
				display: block;
				font-size: 16px;
				line-height: 20px;
			}

			.main {
				padding-top: 70px;
			}

			.banner {
				height: 400px;
				background: #191919 url(images/banner.jpg) no-repeat center 0;
			}

			.icons {
				border-bottom: 1px solid #efefef;
				height: 145px;
			}

			.icon {
				padding-top: 58px;
				width: 138px;
				background: url(images/icon.png) 49px 21px no-repeat;
			}

			.icon:nth-child(2) {
				background-position: -90px 21px;
			}

			.icon:nth-child(3) {
				background-position: -227px 21px;
				position: relative;
			}

			/* 下面是new图标 ：伪元素*/
			.icon:nth-child(3)::before {
				content: "";
				width: 23px;
				height: 11px;
				background: url(images/icon.png) -140px -280px;
				position: absolute;
				top: 15px;
				left: 82px;

			}

			.icon:nth-child(4) {
				background-position: -366px 21px;
				position: relative;
			}

			.icon:nth-child(4)::before {
				content: "";
				width: 23px;
				height: 11px;
				background: url(images/icon.png) -140px -280px;
				position: absolute;
				top: 15px;
				left: 81px;
			}

			.icon:nth-child(5) {
				background-position: -508px 21px;
			}

			.icon:nth-child(6) {
				background-position: -646px 21px;
			}

			.icon:hover {
				background-position: 49px -99px;
			}

			.icon:nth-child(2):hover {
				background-position: -90px -99px;
			}

			.icon:nth-child(3):hover {
				background-position: -227px -99px;
			}

			.icon:nth-child(4):hover {
				background-position: -366px -99px;
			}

			.icon:nth-child(5):hover {
				background-position: -508px -99px;
			}

			.icon:nth-child(6):hover {
				background-position: -646px -99px;
			}

			.icon a {
				display: block;
				font-size: 11px;
				line-height: 81px;
				text-align: center;
				color: #666;
			}

			.icons .w {
				position: relative;
			}

			.twocode {
				width: 128px;
				background: url(images/twocode.png) no-repeat;
				font-size: 11px;
				line-height: 71px;
				padding-top: 106px;
				text-align: center;
				position: absolute;
				top: -32px;
				right: -4px;
				color: #666;
			}

			.news {
				height: 411px;
			}

			.new {
				width: 290px;
			}

			.title {}

			.title h4 {
				font-weight: normal;
				font-size: 19px;
				line-height: 61px;
				padding-top: 20px;
				color: #666;
			}

			.title a {
				position: relative;
				font-size: 12px;
				line-height: 58px;
				margin-right: 16px;
				padding-top: 23px;
				color: #666;
			}

			.title a::before {
				content: "";
				width: 4px;
				height: 4px;
				border: 2px solid #666;
				border-left-color: transparent;
				border-bottom-color: transparent;
				transform: rotate(45deg);
				position: absolute;
				top: 48px;
				left: 22px;
			}

			.pic {
				background: #f2f2f2 url(images/activity_pic.jpg) no-repeat;
				padding-top: 120px;
			}

			.pic2 {
				background: #f2f2f2 url(images/news_pic.jpg) no-repeat;
				padding-top: 120px;
			}

			.pic3 {
				background: #f2f2f2 url(images/community_pic.jpg) no-repeat;
				padding-top: 120px;
			}

			.pic a,
			.pic2 a,
			.pic3 a {
				font-size: 12px;
				line-height: 34px;
				display: block;
				text-align: center;
				color: #666;
			}

			.new ul {}

			.new ul li {}

			.new ul li a {
				font-size: 14px;
				line-height: 26px;
				color: #666;
			}

			.new ul li:nth-child(1) {
				padding-top: 10px;
			}

			.new ul li:nth-child(5) {
				padding-bottom: 36px;
			}

			.distance {
				margin-right: 58px;
				padding-left: 58px;
			}

			footer {
				background-color: #333333;
				width: 100%;
				height: 491px;
			}

			.footer_h {
				height: 297px;
			}

			.headline {
				height: 251px;
				margin-top: 46px;
			}

			.headline h5,
			.line_head h5 {
				font-size: 12px;
				line-height: 20px;
				color: #b1aca8;
			}

			.headline:nth-child(1) {
				width: 76px;
				padding-right: 88px;
			}

			.headline:nth-child(2) {
				width: 49px;
				padding-right: 116px;
			}

			.headline:nth-child(3) {
				width: 49px;
				padding-right: 116px;
			}

			.headline:nth-child(4) {
				width: 73px;
				padding-right: 92px;
			}

			.headline:nth-child(5) {
				width: 61px;
				padding-right: 105px;
			}

			.headline:nth-child(6) {
				width: 136px;
			}

			.line_head {
				position: relative;
				padding-left: 30px;
				border: 1px solid #666;
			}

			.line_head::before {
				content: "";
				width: 15px;
				height: 15px;
				background: url(images/icon.png) 0 -293px;
				position: absolute;
				top: 3px;
				left: 8px;
			}

			.line_head::after {
				content: "";
				width: 9px;
				height: 15px;
				background: url(images/icon.png) -31px -293px;
				position: absolute;
				top: 3px;
				left: 112px;
			}
			.headline:nth-child(6) a{
				display: block;
			}
			.line {
				padding-left: 30px;
				position: relative;
			}

			.line::before {
				content: "";
				width: 9px;
				height: 16px;
				background: url(images/icon.png) -5px -320px no-repeat;
				position: absolute;
				top: 3px;
				left: 12px;
			}

			.line:nth-child(3)::before {
				width: 16px;
				height: 12px;
				background-position: -2px -347px;
				left: 9px;
			}

			.line:nth-child(4)::before {
				width: 16px;
				height: 13px;
				background-position: -2px -373px;
				left: 9px;
			}

			.line:nth-child(5)::before {
				width: 20px;
				height: 16px;
				background-position: 0 -397px;
				left: 7px;
			}

			.line:nth-child(6)::before {
				width: 17px;
				height: 18px;
				background-position: -1px -422px;
				left: 8px;
			}

			.line:nth-child(7)::before {
				width: 20px;
				height: 16px;
				background-position: -1px -449px;
				left: 8px;
			}
			
			.line:nth-child(2):hover::before {
				background-position: -30px -320px;
			}

			.line:nth-child(3):hover::before {
				background-position: -27px -347px;
			}

			.line:nth-child(4):hover::before {
				background-position: -27px -373px;
			}

			.line:nth-child(5):hover::before {
				background-position: -25px -397px;
			}

			.line:nth-child(6):hover::before {
				background-position: -26px -422px;
			}

			.line:nth-child(7):hover::before {
				background-position: -26px -449px;
			}

			.headline ul li a,
			.line a {
				
				text-decoration: none;
				font-size: 11px;
				line-height: 19px;
				color: #b1aca8;
			}

			.links {
				padding-top: 14px;
				padding-bottom: 12px;
				border-top: 1px dashed #666;
				border-bottom: 1px dashed #666;
			}

			.links a {
				font-size: 11px;
				color: #b1aca8;
				padding: 0 8px 0 8px;
				border-right: 1px solid #b1aca8;
			}

			.links a:nth-child(1) {
				padding-left: 10px;
			}

			.link1 a:nth-child(14) {
				border: 0;
				position: relative;
			}

			.link1 a:nth-child(14)::before {
				content: "";
				width: 16px;
				height: 16px;
				background: url(images/icon.png) -100px -280px;
				position: absolute;
				left: 61px;
			}

			.links p {
				font-size: 11px;
				color: #666;
				padding-left: 10px;
				padding-right: 5px;
			}

			.link p:nth-child(2) {
				padding-left: 0;
				padding-right: 0;
			}

			.link a:nth-child(3) {
				padding-left: 5px;
			}

			.link a:nth-child(15) {
				border: 0;
				position: relative;
			}

			.link a:nth-child(15)::before {
				content: "";
				width: 16px;
				height: 16px;
				background: url(images/icon.png) -100px -280px;
				position: absolute;
				left: 66px;
			}

			.brand {}

			.img_logo {
				padding-top: 31px;
				padding-right: 16px;
			}

			.extra_text {
				color: #666;
				font-size: 11px;
				padding-top: 25px;
			}

			.img_qa {
				padding-top: 26px;
				padding-left: 100px;
				padding-right: 15px;
			}

			.img_gs {
				padding-top: 27px;
				padding-right: 15px;
			}

			.img_knet {
				padding-top: 27px;
				padding-right: 14px;
			}

			.img_anva {
				padding-top: 26px;
			}
		</style>
	</head>
	<body style="min-width: 986px;">
		<!-- 语义化标签 -->
		<header>
			<div class="w clearfix">
				<div class="logo fl"><img src="images/uclogo.png" alt=""></div>
				<!-- 无序列表 -->
				<ul class="navigation clearfix fr">
					<li class="fl current"><a href="">首页</a></li>
					<li class="fl">
						<a href="">下载</a>
						<ul class="subnav">
							<li><a href="">手机UC</a></li>
							<li><a href="">电脑浏览器</a></li>
							<li><a href="">TV浏览器</a></li>
						</ul>
					</li>
					<li class="fl"><a href="">公司</a></li>
					<li class="fl"><a href="">合作</a></li>
					<li class="fl"><a href="">社区</a></li>
					<li class="fl"><a href="">帮助</a></li>
				</ul>
			</div>
		</header>
		<div class="main">
			<div class="banner"></div>
			<div class="icons">
				<div class="w clearfix">
					<div class="icon fl"><a href="">Android版下载</a></div>
					<div class="icon fl"><a href="">iPhone版下载</a></div>
					<div class="icon fl"><a href="">电脑版下载</a></div>
					<div class="icon fl"><a href="">Pad版下载</a></div>
					<div class="icon fl"><a href="">TV版下载</a></div>
					<div class="icon fl"><a href="">WP版下载</a></div>
					<div class="twocode">手机扫一扫下载</div>
				</div>
			</div>
			<div class="news clearfix w">
				<div class="new fl">
					<div class="title clearfix">
						<h4 class="fl">活动专区</h4>
						<!-- <div class="fr"></div> -->
						<a href="" class="fr">更多</a>
					</div>
					<div class="pic">
						<a href="">上uc.cn，下载抢100M流量礼包</a>
					</div>
					<!-- ul>li*5>a -->
					<ul>
						<li><a href="">你没得到奖，因为你没有摇一摇</a></li>
						<li><a href="">第二季环保袋活动开放申请啦</a></li>
						<li><a href="">最壕UC微信号，天天送大奖</a></li>
						<li><a href="">UC省钱攻略大曝光：6000万红包等你来！</a></li>
						<li><a href="">手机浏览器成移动上网第一入口 UC稳居市场</a></li>
					</ul>
				</div>
				<div class="new fl distance">
					<div class="title clearfix">
						<h4 class="fl">新闻动态</h4>
						<!-- <div class="fr"></div> -->
						<a href="" class="fr">更多</a>
					</div>
					<div class="pic2">
						<a href="">不断寻找合伙人</a>
					</div>
					<ul>
						<li><a href="">神马搜索与《梦想星搭档》展开娱乐内</a></li>
						<li><a href="">UC九游11月报告：《乱斗西游》成MOBA手</a></li>
						<li><a href="">UC浏览器“抢票帮”颠覆传统 亲朋好友</a></li>
						<li><a href="">UC浏览器新版造就极致视频体验</a></li>
						<li><a href="">手机浏览器使用频率仅次于即时通讯</a></li>
					</ul>
				</div>
				<div class="new fl">
					<div class="title clearfix">
						<h4 class="fl">社区热帖</h4>
						<!-- <div class="fr"></div> -->
						<a href="" class="fr">更多</a>
					</div>
					<div class="pic3">
						<a href="">UC浏览器抢票帮正式发布！团结一切力量</a>
					</div>
					<ul>
						<li><a href="">UC浏览器Android版10.0皮肤制作教程</a></li>
						<li><a href="">年底求加薪技巧！哥拼的是拍马屁的技巧</a></li>
						<li><a href="">UC浏览器抢票帮——召唤朋友一起帮你抢</a></li>
						<li><a href="">UC姐神秘面容首次曝光，多图胆小慎入</a></li>
						<li><a href="">【uc记者团】2015年春节回家 攻略</a></li>
					</ul>
				</div>
			</div>
		</div>
		<footer>
			<div class="w footer_h">
				<div class="headline fl">
					<h5>UC浏览器</h5>
					<ul>
						<li><a href="">产品动态</a></li>
						<li><a href="">功能介绍</a></li>
						<li><a href="">安卓浏览器</a></li>
						<li><a href="">iPhone浏览器</a></li>
						<li><a href="">电脑浏览器</a></li>
						<li><a href="">WP浏览器</a></li>
						<li><a href="">iPad浏览器</a></li>
						<li><a href="">aPad浏览器</a></li>
						<li><a href="">TV浏览器</a></li>
						<li><a href="">塞班浏览器</a></li>
					</ul>
				</div>
				<div class="headline fl">
					<h5>公司</h5>
					<ul>
						<li><a href="">公司首页</a></li>
						<li><a href="">公司概况</a></li>
						<li><a href="">公司动态</a></li>
						<li><a href="">管理团队</a></li>
						<li><a href="">企业文化</a></li>
						<li><a href="">粉丝专区</a></li>
						<li><a href="">荣誉之旅</a></li>
						<li><a href="">联系我们</a></li>
						<li><a href="">投资者</a></li>
						<li><a href="">UC闪屏</a></li>
					</ul>
				</div>
				<div class="headline fl">
					<h5>其它产品</h5>
					<ul>
						<li><a href="">UC九游</a></li>
						<li><a href="">PP助手</a></li>
						<li><a href="">神马搜索</a></li>
						<li><a href="">UC云</a></li>
						<li><a href="">U点充值</a></li>
						<li><a href="">用户中心</a></li>
						<li><a href="">体验中心</a></li>
						<li><a href="">帮助中心</a></li>
						<li><a href="">意见反馈</a></li>
					</ul>
				</div>
				<div class="headline fl">
					<h5>开放合作</h5>
					<ul>
						<li><a href="">游戏开放平台</a></li>
						<li><a href="">运营商合作</a></li>
						<li><a href="">终端厂商合作</a></li>
						<li><a href="">互联网合作</a></li>
						<li><a href="">开发者中心</a></li>
						<li><a href="">战略投资</a></li>
					</ul>
				</div>
				<div class="headline fl">
					<h5>招聘</h5>
					<ul>
						<li><a href="">社会招聘</a></li>
						<li><a href="">人才推荐</a></li>
						<li><a href="">校园招聘</a></li>
						<li><a href="">实习生招聘</a></li>
						<li><a href="">内部推荐</a></li>
						<li><a href="">走进UC</a></li>
					</ul>
				</div>
				<div class="headline fl">
					<div class="line_head">
						<h5>中文版</h5>
					</div>
					<div class="line"><a href="">手机站</a></div>
					<div class="line"><a href="">Pad站</a></div>
					<div class="line"><a href="">TV站</a></div>
					<div class="line"><a href="">UC浏览器微博</a></div>
					<div class="line"><a href="">UC浏览器贴吧</a></div>
					<div class="line"><a href="">UC浏览器微信</a></div>
				</div>
			</div>
			<div class="links w clearfix link1">
				<a href="" class="fl">阿里巴巴集团</a>
				<a href="" class="fl">淘宝网</a>
				<a href="" class="fl">天猫</a>
				<a href="" class="fl">聚划算</a>
				<a href="" class="fl">全球速卖通</a>
				<a href="" class="fl">阿里巴巴国际交易市场</a>
				<a href="" class="fl">1688</a>
				<a href="" class="fl">阿里妈妈</a>
				<a href="" class="fl">阿里旅行·去啊</a>
				<a href="" class="fl">阿里云计算</a>
				<a href="" class="fl">YunOS</a>
				<a href="" class="fl">阿里通信</a>
				<a href="" class="fl">万网</a>
				<a href="" class="fl">高德</a>
			</div>
			<div class="w links clearfix link">
				<p class="fl">友情链接</p>
				<p class="fl">:</p>
				<a href="" class="fl">手机游戏</a>
				<a href="" class="fl">网易科技</a>
				<a href="" class="fl">dospy智能手机网</a>
				<a href="" class="fl">历趣手机软件</a>
				<a href="" class="fl">威锋网</a>
				<a href="" class="fl">小说全搜</a>
				<a href="" class="fl">IT之家</a>
				<a href="" class="fl">前瞻网</a>
				<a href="" class="fl">手机软件下载</a>
				<a href="" class="fl">pc6下载</a>
				<a href="" class="fl">KK语音</a>
				<a href="" class="fl">安卓市场</a>
				<a href="" class="fl">机锋网</a>
			</div>
			<div class="brand w clearfix">
				<div class="fl img_logo"><img src="images/logo_company.png" alt=""></div>
				<div class="fl extra_text">
					<p>&copy;2004-2014 uc.cn 版权所有 网络文化经营许可证：文网文[2010]176号</p>
					<p>中华人民共和国互联网药品信息服务资格证：（粤）-非经营性-2011-0120</p>
					<p>增值电信业务经营许可证: 粤B2-20070379 粤ICP备09210879号</p>
				</div>
				<div class="fl img_qa"><img src="images/qa_wen.png" alt=""></div>
				<div class="fl img_gs"><img src="images/gs.png" alt=""></div>
				<div class="fl img_knet"><img src="images/knet_cn.png" alt=""></div>
				<div class="fl img_anva"><img src="images/anva.png" alt=""></div>
			</div>
		</footer>
	</body>
</html>
